<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='js/vue.js'></script>
</head>

<body>
    <div id='app'>
        {{msg}}
        <hr />
        <father @appfunc='show'></father>
    </div>
    <script type='text/javascript'>
        var son1 = {
            template: `<div class='son'>
                我是son组件===
                <button @click='sfunc'>son向father传值</button>
            </div>`,
            data() {
                return {
                    s1: 'son1'
                }
            },
            methods:{
                sfunc(){
                    this.$emit('s_f_func',this.s1)
                }
            }
        }
        var father = {
            props: ['app'],
            template: `<div  class='father'>
                我是father组件====
                <button @click.prevent="fshow">我要向app传值</button>==={{fson}}
                <hr/>
                <son @s_f_func='sshow'></son>
            </div>`,
            data() {
                return {
                    f1: 'father1',
                    f2:'father2',
                    f3:'father3',
                    obj:{
                        a:1,
                        b:2,
                        c:3
                    },
                    fson:''

                }
            },
            components: {
                son: son1
            },
            methods:{
                fshow(){
                    this.$emit('appfunc',this.obj)
                },

                sshow(message){
                    console.log('我是son向father传的值',message);
                    this.fson=message
                }
            }
        }

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue  app'
            },
            components: {
                father
            },
            methods:{
                show(message){
                    console.log('我接收到了father传过来的值',message);
                    this.msg=message
                    
                }
            }
        });
    </script>
</body>

</html>